<template>
  <div>
    <el-upload
      ref="upload"
      class="upload"
      action="/shuzhongtianApi/oss/uploadFilePicture"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-error="handleError"
      :on-success="handleSuccess"
      :headers="token"
      :before-upload="beforeAvatarUpload"
       :file-list="showList"
      :limit="3"
      accept=".png,.jpg,.jpeg"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" width="800" append-to-body>
      <img
        :src="dialogImageUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>
  </div>
</template>

<script>
import { delpictureApi } from '@/api/mission'
export default {
  name: 'SevencolorUserUpload',
  props: {
    fileList: {
      type: Array
    }
  },

  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      showList: []
    }
  },
  computed: {
    pictureList () {
      return this.$store.getters.pictureList
    },
    token () {
      return { token: this.$store.getters.userInfo.token }
    }
  },
  mounted () {
    this.$watch('fileList', this.editShow)// 监听this.fileList
  },

  methods: {
    // 删除
    async handleRemove (file, fileList) {
      console.log(fileList, 'del')
      if (file.status === 'success') {
        this.pictureList.filter((item, index) => {
          if (item === file.response.data) {
            this.pictureList.splice(index, 1)
          }
          return item !== file.response.data
        })
        console.log(this.pictureList)
        await delpictureApi(file.response.data)
      }
    },
    handlePictureCardPreview (file) {
      // console.log(file, '点击列表')
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 超出上传限制
    handleExceed (files, fileList) {
      this.$message('最多添加三张')
      // console.log(files)
    },
    // 上传失败
    handleError () {
      this.$message.error('添加失败')
    },
    //
    beforeAvatarUpload (file) {
      // console.log(file, '上传过程判断')
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('添加图片只能是 .JPG、.PNG、.JPEG 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('添加图片大小不能超过 5MB!')
        return false
      }
      return isJPG && isLt5M
    },
    handleSuccess (fileList, file) {
      this.pictureList.push(file.response.data)
      console.log(this.pictureList)
    },
    clearFiles () {
      this.$refs.upload.clearFiles()
    },
    editShow (newFileList, oldFileList) {
      console.log(newFileList)
      if (newFileList !== undefined && newFileList !== null && newFileList !== String && newFileList !== '') {
        this.showList = newFileList.map(url => ({ url }))
      }
      console.log(this.showList)
    }
  }
}
</script>
<style lang="scss" scoped>
// 上传图片
.upload {
  max-height: 100px;
  i {
    font-size: 0.35rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.175rem;
    margin-left: -0.175rem;
  }
}
::v-deep .el-upload--picture-card {
  max-width: 100px !important;
  max-height: 100px !important;
  position: relative;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  max-width: 100px !important;
  max-height: 100px !important;
}
</style>
